<template>
   <div class="hot-header">
      <div class="hot-header-center">
        <!-- 头部 -->
        <div class="header-left">
          <h2 class="hot-title" title="爆品情报系统"><a href="javascript:;">爆品情报系统</a></h2>
          <div class="hot-search-keywords"  @click="jumpSearch()">
            <div class="hot-border-gradient">
              <input disabled="disabled" type="text" placeholder="请输入关键词">
            </div>
            <div class="hot-serarch-icon">
              <i class="iconfont iconicon-sousu-copy"></i>
            </div>
          </div>
        </div>
        <!-- 右边 -->
        <div class="header-right">
          <div class="hot-return-huoda">
            <img src="../../assets/images/hot-system-hd-logo.png" alt="加载中..." @click="returnHandler">
            <span @click="returnHandler">返回伙达</span>
          </div>
          <div class="hot-favorite" @click="favoriteHandler">
            <img src="../../assets/images/hot-system-favorite.png" alt="加载中...">
            <span @click="favoriteHandler">收藏夹</span>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
      
    }
  },
  methods:{
    //返回伙达
    returnHandler(){
      console.log("返回伙达")
      this.$router.push("/pickGoodsHall")
    },
    //收藏夹
    favoriteHandler(){
      console.log("收藏夹")
      this.$router.push('/hotCollect')
    },
    //进入搜索页
    jumpSearch(){
      console.log("进入搜索页")
      this.$router.push('/hotSearch')
    }
  }
}
</script>

<style scoped>
 /* 爆品头部 */
.hot-header{
  height:100px;
  border-bottom:2px solid #404040;
  box-sizing:border-box;
  display:flex;
  align-items:center;
}
.hot-header-center{
  width:1440px;
  display:flex;
  justify-content:space-between;
  margin: 0 auto;
  color:#dbdbdc;
  font-size: 16px;
}
@media screen and (max-width:1440px){
  .hot-header-center{
    width:1200px;
    margin: 0 auto;
  }
}
/* 头部左边 */
.header-left{
  display:flex;
  justify-content:space-between;
  align-items: center;
  width:700px;
}
.header-left h2 a{
  text-indent:-20000px;
  display:block;
  overflow:hidden;
  width:253px;
  height:48px;
  background: url('../../assets/images/hot-system-logo.png') no-repeat center center;
  background-size:contain;
  cursor:pointer;
}
.header-left .hot-search-keywords{
  display:flex;
  align-items: center;
}
.header-left .hot-search-keywords .hot-border-gradient{
  width:338px;
  height:44px;
  padding:3px 0 3px 2px;
  box-sizing:border-box;
  border-radius: 5px 0 0 5px; 
  background-image:linear-gradient(to right, #0099ff,#0099ff,#05d5fc,#07edfb);
  letter-spacing: 1px;
}
.header-left .hot-search-keywords .hot-border-gradient input{
  width: 100%;
  height: 100%;
  padding-left:24px;
  box-sizing:border-box;
  background-color:  #151923;
  border-radius: 5px 0 0 5px; 
  font-size:inherit;
  color:#dbdbdc;
  letter-spacing: inherit;
}
.header-left .hot-search-keywords .hot-serarch-icon{
  width:55px;
  height:44px;
  line-height: 40px;
  text-align: center;
  border:3px solid #07edfb;
  border-left:0;
  box-sizing:border-box;
  border-radius:0 5px 5px 0;
  background-image:linear-gradient(225deg,#07edfb,#0099ff)
}
.header-left .hot-search-keywords .hot-serarch-icon i{
  font-size:26px;
  color:#ffffff;
  cursor:pointer;
}
/* 头部右边 */
.header-right{
  display:flex;
}
.hot-return-huoda,
.hot-favorite{
  display:flex;
  align-items: center;
  cursor:pointer;
  transition: all .2s ease;
  color:#666666;
}
.hot-return-huoda:hover,
.hot-favorite:hover{
  color:#ffffff;
}
.hot-return-huoda img{
  width:32px;
  height:24px;
  display:block;
  margin-right:10px;
}
.hot-favorite{
  margin-left:30px;
}
.hot-favorite img{
  width: 35px;
  height: 30px;
  display:block;
  margin-right:10px;
}
</style>
